<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>商品展示</title>
    <style>
        body {
            font-family: 'PingFang SC', Helvetica, Helvetica, 'Microsoft YaHei', 微软雅黑, Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #FFEEF7;
            margin-top: 40px;
        }

        .product-group {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .product-item {
            text-align: center;
            margin-bottom: 20px;
            position: relative;
            flex: 0 0 calc(33.33% - 20px);
        }

        .product-item:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            background-color: rgba(255, 255, 255, 0.3);
            z-index: -1;
        }

        a img {
            display: block;
            width: 300px;
            height: 300px;
            border: 0;
            transition: transform 0.3s ease;
            border-radius: 8px;
            margin: 0 auto;
            align-items: center; /* 水平居中 */
            justify-content: center; /* 垂直居中 */
            margin-top: 10px;
        }

        .product-item:hover a img {
            transform: scale(1.1);
        }

        .product-name {
            color: #333;
            font-size: 21px;
            font-weight: 500;
            letter-spacing: 1px;
            padding: 10px;
            text-align: center;
        }

        .product-price {
            color: #CB986D;
            font-size: 21px;
            font-weight: 500;
            letter-spacing: normal;
            padding: 10px;
            text-align: center;
        }
        .product-item.empty {
            visibility: hidden;
            height: 100%;
        }
        .pagination {
            text-align: center;
            margin-top: 20px;
            display: flex;
            justify-content: center;
        }

        .page-btn {
            padding: 10px 15px;
            margin: 0 5px;
            cursor: pointer;
            background-color: #f2f2f2;
            border: none;
            border-radius: 5px;
            font-size: 16px;
        }

        .page-btn:hover {
            background-color: #ddd;
        }
    </style>
</head>

<body>
<div class="product-group">
    <div class="product-item">
        <a href="productview/cake2.htm" onclick="scrollToTop();">
            <img src="images/5.jpg" alt="Hello Kitty 合作限定 奶油云端">
        </a>
        <div class="product-name">Hello Kitty 合作限定 奶油云端</div>
        <div class="product-price">-100%动物奶油 &yen; 299</div>
    </div>
    <div class="product-item">
        <a href="productview/cake1.htm" onclick="scrollToTop();">
            <img src="images/4.jpg" alt="Hello Kitty 合作限定 蝴蝶结公主">
        </a>
        <div class="product-name">Hello Kitty 合作限定 蝴蝶结公主</div>
        <div class="product-price">-100%动物奶油 &yen; 299</div>
    </div>
    <div class="product-item">
        <a href="productview/cake3.htm" onclick="scrollToTop();">
            <img src="images/2.jpg" alt="Hello Kitty 合作限定 可爱相伴">
        </a>
        <div class="product-name">Hello Kitty 合作限定 可爱相伴</div>
        <div class="product-price">-100%动物奶油 &yen; 269</div>
    </div>
</div>
<div class="product-group">
    <div class="product-item">
        <a href="productview/cake4.htm" onclick="scrollToTop();">
            <img src="images/1.jpg" alt="芭比联名系列-心悦芭比">
        </a>
        <div class="product-name">芭比联名系列-心悦芭比</div>
        <div class="product-price">-100%动物奶油 &yen; 299</div>
    </div>
    <div class="product-item">
        <a href="productview/cake5.htm" onclick="scrollToTop();">
            <img src="images/6.jpg" alt="长相思联名系列-茶心芝士">
        </a>
        <div class="product-name">长相思联名系列-茶心芝士</div>
        <div class="product-price">&yen; 39</div>
    </div>
    <div class="product-item">
        <a href="productview/cake6.htm" onclick="scrollToTop();">
            <img src="images/7.jpg" alt="疯狂动物城联名系列-爪爪派">
        </a>
        <div class="product-name">疯狂动物城联名系列-爪爪派</div>
        <div class="product-price">&yen; 12</div>
    </div>
</div>
<div class="pagination">
    <button class="page-btn" onclick="changePage(currentPage - 1)">上一页</button>
    <span>第 <span id="currentPage">1</span> 页</span>
    <button class="page-btn" onclick="changePage(currentPage + 1)">下一页</button>
</div>
<script>
    // JavaScript 函数，用于点击商品时返回顶部
    function scrollToTop() {
        window.scrollTo({top: 0, behavior: 'smooth'});
    }let currentPage = 1;
    let totalPages = 2; // 假设您有5页商品

    function changePage(page) {
        if (page < 1 || page > totalPages) {
            return;
        }
        currentPage = page;
        document.getElementById('currentPage').textContent = currentPage;
        window.location.href = `page2.html`;
    }
</script>
</body>

</html>